import 'package:flutter/material.dart';

class ThirdPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ThirdPageState();
  }
}

class _ThirdPageState extends State<ThirdPage> {
  int _selectIndex = 0;
  final _widgetOption = [
    Text("Index 0 : message"),
    Text("Index 1 : contacts"),
    Text("Index 2 : find"),
  ];
  void _onItemTapped(int index) {
    setState(() {
      _selectIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bottom Navigation demo"),
        centerTitle: true,
      ),

      /// 页面选中之后进行的切换
      body: Center(
        child: _widgetOption.elementAt(_selectIndex),
      ),

      /// 设置底部导航栏
      bottomNavigationBar: BottomNavigationBar(
        /// 底部导航栏的项目
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: "message"),
          BottomNavigationBarItem(
              icon: Icon(Icons.contacts), label: "contacts"),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), label: "search")
        ],

        /// 当前的下标值，刚开始的时候为初始坐标值
        currentIndex: _selectIndex,
        fixedColor: Colors.deepPurple,

        /// 当点击下标之后，组件作出响应
        onTap: _onItemTapped,
      ),
    );
  }
}
